<template>
    <div class="bodyBox">
        <div class="bodyLeft">
            <div class="topicType">
                <div class="titleTextRow">
                    <span class="numTetx">{{ index + 1 }}.</span>
                    <el-tag effect="plain" size="mini">{{
                        question.question_type_name
                    }}</el-tag>
                    <div
                        class="titleText"
                        v-html="question.question_title"
                    ></div>
                    <div class="titleError">
                        <i
                            class="el-icon-info"
                            style="font-size:16px;color:#CCCCCC"
                        ></i>
                        题目有误，
                        <div
                            class="correct"
                            @click="correctError(1, question.question_id)"
                        >
                            我要纠正
                        </div>
                        <el-rate
                            v-model="question.star_num"
                            :disabled="true"
                        ></el-rate>
                    </div>
                </div>
                <!-- 是子试题 题型-->
                <template v-if="isSubQuestion">
                    <div class="titleTextRow1">
                        <span class="numTetx"
                            >{{ childswiperCurrent + 1 }}.</span
                        >
                        <el-tag effect="plain" size="mini">{{
                            subQuestion[childswiperCurrent].question_type_name
                        }}</el-tag>
                        <div
                            class="titleText1"
                            v-html="
                                subQuestion[childswiperCurrent].question_title
                            "
                        ></div>
                        <div class="titleError1">
                            <el-progress
                                style="width:60%"
                                :percentage="
                                    (Number(childswiperCurrent + 1) /
                                        Number(subQuestion.length)) *
                                        100
                                "
                                :show-text="false"
                                color="#5FB878"
                            ></el-progress>
                            <div class="progress">
                                {{ childswiperCurrent + 1 }}/{{
                                    subQuestion.length
                                }}
                            </div>
                        </div>
                    </div>
                    <div class="selectBox">
                        <!-- 单选题 -->
                        <radio-answer
                            @getRadio="getRadio1"
                            v-if="
                                subQuestion[childswiperCurrent]
                                    .question_typeid === 1
                            "
                            :answerList="
                                subQuestion[childswiperCurrent].answer_list
                            "
                            :isDisabled="isDisabled1"
                            :answerLog="subAnswer_id_log[0]"
                        ></radio-answer>
                        <!-- 定值填空题 -->
                        <area-answer
                            v-else-if="
                                subQuestion[childswiperCurrent]
                                    .question_typeid === 3 ||
                                    subQuestion[childswiperCurrent]
                                        .question_typeid === 4
                            "
                            :answerList="
                                subQuestion[childswiperCurrent].answer_list
                            "
                            :isDisabled="isDisabled1"
                            :answerLog="subText_answer_log"
                            @getArea="getArea1"
                        ></area-answer>
                        <!-- 多选题 -->
                        <!-- <check-box-answer
                        v-else-if="question_typeid === 2"
                        :answerList="question.answer_list"
                        :isDisabled="isDisabled"
                        :answerLog="text_answer_log"
                        @getCheckArr="getCheckArr"
                    >
                    </check-box-answer> -->
                    </div>
                </template>
                <!-- 不是子试题题型 -->
                <div class="selectBox" v-if="!isSubQuestion">
                    <!-- 单选题 -->
                    <radio-answer
                        @getRadio="getRadio"
                        v-if="question_typeid === 1"
                        :answerList="question.answer_list"
                        :isDisabled="isDisabled"
                        :answerLog="answer_id_log[0]"
                    ></radio-answer>
                    <!-- 定值填空题 -->
                    <area-answer
                        v-else-if="question_typeid === 3"
                        :answerList="question.answer_list"
                        :isDisabled="isDisabled"
                        :answerLog="text_answer_log"
                        @getArea="getArea"
                    ></area-answer>
                    <!-- 多选题 -->
                    <!-- <check-box-answer
                        v-else-if="question_typeid === 2"
                        :answerList="question.answer_list"
                        :isDisabled="isDisabled"
                        :answerLog="text_answer_log"
                        @getCheckArr="getCheckArr"
                    >
                    </check-box-answer> -->
                </div>
            </div>
            <!-- 不是子试题答案解析 -->
            <div v-if="isAnswer && !isSubQuestion">
                <div class="analysis1">
                    <!-- 如果此题不支持作答 -->
                    <div v-if="!(question_typeid === 4)">
                        <div class="answer">
                            <div class="checkAnswer">
                                <span>你的答案：{{ input_value }}</span>
                                <template v-if="isCorrect">
                                    <i
                                        class="el-icon-check"
                                        style="font-size: 16px;font-weight: 600;margin: 0 10px;color: #18db60;"
                                    ></i>
                                </template>
                                <template v-else>
                                    <i
                                        class="el-icon-close"
                                        style="font-size: 16px;font-weight: 600;margin: 0 10px;color: red;"
                                    ></i>
                                </template>
                            </div>
                            <div class="yourAnswer">
                                正确答案：{{ correct }}
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <div class="analysisRow">
                        <div class="analysisTitle">答案解析</div>
                        <div class="titleError">
                            <i
                                class="el-icon-info"
                                style="font-size:16px;color:#CCCCCC"
                            ></i>
                            解析有误，
                            <div
                                class="correct"
                                @click="correctError(2, question.question_id)"
                            >
                                我要纠正
                            </div>
                        </div>
                    </div>
                    <div
                        class="answerBody"
                        v-html="question.question_analysis"
                    ></div>
                    <div
                        class="cause"
                        v-if="
                            question.isShowError &&
                                is_err &&
                                question_typeid !== 4 &&
                                !isSubQuestion
                        "
                    >
                        <div class="cause-title">
                            出错原因：
                        </div>
                        <div
                            class="cause-type"
                            v-for="(item2, index2) in errorList"
                            :key="index2"
                        >
                            <div class="type-title">
                                {{ item2.error_type_name }}
                            </div>
                            <el-radio-group
                                size="small"
                                @change="errChange"
                                v-model="errReason"
                            >
                                <template
                                    v-for="(item3, index3) in item2.errorList"
                                >
                                    <el-radio
                                        :label="item3.error_id"
                                        border
                                        :disabled="isErrorReasonDisabled"
                                        :key="index3"
                                    >
                                        {{ item3.error_name }}
                                    </el-radio>
                                </template>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 是子试题答案解析 -->
            <div v-if="isAnswer1 && isSubQuestion">
                <div class="analysis1">
                    <!-- 如果此题不支持作答 -->
                    <div>
                        <div class="answer">
                            <div class="checkAnswer">
                                <span>你的答案：{{ input_value1 }}</span>
                                <template v-if="isCorrect1">
                                    <i
                                        class="el-icon-check"
                                        style="font-size: 16px;font-weight: 600;margin: 0 10px;color: #18db60;"
                                    ></i>
                                </template>
                                <template v-else>
                                    <i
                                        class="el-icon-close"
                                        style="font-size: 16px;font-weight: 600;margin: 0 10px;color: red;"
                                    ></i>
                                </template>
                            </div>
                            <div class="yourAnswer">
                                正确答案：{{ correct1 }}
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <div class="analysisRow">
                        <div class="analysisTitle">答案解析</div>
                        <div class="titleError">
                            <i
                                class="el-icon-info"
                                style="font-size:16px;color:#CCCCCC"
                            ></i>
                            解析有误，
                            <div
                                class="correct"
                                @click="
                                    correctError(
                                        2,
                                        subQuestion[childswiperCurrent]
                                            .question_id
                                    )
                                "
                            >
                                我要纠正
                            </div>
                        </div>
                    </div>
                    <div
                        class="answerBody"
                        v-html="
                            subQuestion[childswiperCurrent].question_analysis
                        "
                    ></div>
                </div>
            </div>
            <div class="footerBar">
                <div class="btnGround">
                    <template v-if="isSubQuestion">
                        <template v-if="isAnswer1">
                            <!-- 题目为第一题时 -->
                            <template
                                v-if="
                                    childswiperCurrent + 1 == 1 &&
                                        swiperCurrent + 1 == 1
                                "
                            >
                                <!--  下一题 -->
                                <!-- 题目为最后一题 -->
                                <template
                                    v-if="
                                        childswiperCurrent + 1 ==
                                            subQuestion.length
                                    "
                                >
                                    <div
                                        class="bottomBtu3"
                                        @click="toIntellectualReport"
                                    >
                                        查看报告
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="bottomBtu3" @click="next">
                                        下一题
                                    </div>
                                </template>
                            </template>
                            <!-- 题目不是第一题 -->
                            <template v-else>
                                <!-- 题目为最后一题 -->
                                <template
                                    v-if="
                                        childswiperCurrent + 1 ==
                                            subQuestion.length &&
                                            swiperCurrent + 1 == len
                                    "
                                >
                                    <div class="bottomBtu1" @click="last">
                                        上一题
                                    </div>
                                    <div
                                        class="bottomBtu2"
                                        @click="toIntellectualReport"
                                    >
                                        查看报告
                                    </div>
                                </template>
                                <!-- 题目不是最后一题 -->
                                <template v-else>
                                    <div class="bottomBtu1" @click="last">
                                        上一题
                                    </div>
                                    <!--  下一题  -->
                                    <div class="bottomBtu2" @click="next">
                                        下一题
                                    </div>
                                </template>
                            </template>
                        </template>
                        <template v-else>
                            <!--  答题 -->
                            <!-- <div class="bottomBtu3" @click="sub_answer">
                                {{
                                    subQuestion[childswiperCurrent]
                                        .question_typeid === 4
                                        ? "显示解析"
                                        : "答题"
                                }}
                            </div> -->
                            <div class="bottomBtu3" @click="sub_answer">
                                答题
                            </div>
                        </template>
                    </template>
                    <template v-else>
                        <template v-if="isAnswer">
                            <!-- 题目为第一题时 -->
                            <template v-if="swiperCurrent + 1 == 1">
                                <!--  下一题 -->
                                <!-- 题目为最后一题 -->
                                <template v-if="swiperCurrent + 1 == len">
                                    <div
                                        class="bottomBtu3"
                                        @click="toIntellectualReport"
                                    >
                                        查看报告
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="bottomBtu3" @click="next">
                                        下一题
                                    </div>
                                </template>
                            </template>
                            <!-- 题目不是第一题 -->
                            <template v-else>
                                <!-- 题目为最后一题 -->
                                <template v-if="swiperCurrent + 1 == len">
                                    <div class="bottomBtu1" @click="last">
                                        上一题
                                    </div>
                                    <div
                                        class="bottomBtu2"
                                        @click="toIntellectualReport"
                                    >
                                        查看报告
                                    </div>
                                </template>
                                <!-- 题目不是最后一题 -->
                                <template v-else>
                                    <div class="bottomBtu1" @click="last">
                                        上一题
                                    </div>
                                    <!--  下一题  -->
                                    <div class="bottomBtu2" @click="next">
                                        下一题
                                    </div>
                                </template>
                            </template>
                        </template>
                        <template v-else>
                            <!--  答题 -->
                            <div class="bottomBtu3" @click="sub_answer">
                                {{
                                    question_typeid === 4 && !isSubQuestion
                                        ? "显示解析"
                                        : "答题"
                                }}
                            </div>
                        </template>
                    </template>
                </div>
                <div class="footerText">智助教育提供技术支持</div>
            </div>
        </div>

        <!-- 右边 -->
        <template v-if="isAnswer && !isSubQuestion">
            <div class="content-flex-right">
                <div class="content-flex-right-item">
                    <div class="right-item-title">做题总人数</div>
                    <div class="right-item-text">
                        {{ question.train_num }}人
                    </div>
                    <img src="@/assets/images/synchronization/shan.png" />
                </div>
                <div class="content-flex-right-item">
                    <div class="right-item-title">平均正确率</div>
                    <div class="right-item-text">
                        {{ Math.round(question.accuracy) }}%
                    </div>
                    <div class="layui-progress">
                        <el-progress
                            :percentage="Math.round(question.accuracy)"
                            :show-text="false"
                            color="#5FB878"
                        ></el-progress>
                    </div>
                </div>
                <div class="content-flex-right-item">
                    <div class="right-item-flex">
                        <div class="item-flex-left">
                            <div class="right-item-title">平均用时</div>
                            <div class="right-item-text">
                                {{ Math.round(question.train_time) }}s
                            </div>
                        </div>
                        <div class="item-flex-right">
                            <div class="right-item-title">我的用时</div>
                            <div class="right-item-text">
                                {{ my_train_time }}s
                            </div>
                        </div>
                    </div>
                    <img src="@/assets/images/synchronization/shan2.png" />
                </div>
                <div class="content-flex-right-rate">
                    <div class="rate-title">给题目评分：</div>
                    <el-rate
                        v-model="star"
                        @change="starChange"
                        :disabled="isStar"
                    ></el-rate>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="content-flex-right">
                <div class="bodyRight" v-if="!isAnswer1">
                    <div class="rightBox">
                        <div class="topBox">
                            <div class="countDown">{{ spent.str }}</div>
                            <div class="subtimeText">
                                <i
                                    class="el-icon-time"
                                    style="color: #018854;margin-right: 5px;font-weight: 600;"
                                ></i
                                >计时时间
                            </div>
                            <div class="answerNum">
                                总题数：（{{ index + 1 }}/{{ len }})
                            </div>
                            <el-divider></el-divider>
                            <div class="optionBox">
                                <div
                                    v-for="i in len"
                                    class="option"
                                    :key="i"
                                    :class="[
                                        i == index + 1 ? 'isNowStateBox' : '',
                                        i < index + 1 ? 'isEDStateBox' : ''
                                    ]"
                                >
                                    {{ i }}
                                </div>
                            </div>
                        </div>
                        <div class="right-bottom">
                            <div class="Tips">
                                <div class="neverBox"></div>
                                <div>未选中项</div>
                                <div class="nowBox"></div>
                                <div>选中项</div>
                                <div class="isBoxEd"></div>
                                <div>已达项</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <el-dialog
            :title="correctTitle"
            :visible="isShowCorrect"
            width="400px"
            :show-close="false"
            center
        >
            <div class="correctInput">
                <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="请填写遇到的问题内容"
                    v-model="correctInput"
                >
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="(isShowCorrect = false), (correctInput = '')"
                    >取 消</el-button
                >
                <el-button type="primary" @click="correctSubmit"
                    >提交</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import radioAnswer from "../components/radioAnswer";
import areaAnswer from "../components/areaAnswer";
// import checkBoxAnswer from "../components/checkBoxAnswer";
import { Base64 } from "js-base64";
import { practiceAnswer } from "@/api/testQuestions/practiceAnswer";
import { addPracticeTrainStar } from "@/api/testQuestions/practiceTrainDetail";
import { practiceTrainTime } from "@/api/testQuestions/practiceTrainTime";
import { feedbackAdd } from "@/api/testQuestions/feedbackAdd";
import {
    getErrorList,
    addPracticeTrainError
} from "@/api/testQuestions/errorList";
import { practiceAnswerLog } from "@/api/testQuestions/practice";
export default {
    components: {
        radioAnswer,
        areaAnswer
        // checkBoxAnswer
    },
    props: {
        question: Object,
        isAnswerLog: Boolean, //是否已经作答
        index: Number,
        len: Number, // 练习记录的题目总数
        practice_lists_count: Number,
        // filterHTMLTag: Number,
        practice_id: Number,
        // resourceList: Array, // 资源(名师解析)列表
        questionTotal: Number, // 该章节的题目总数
        lastPage: Number, // 该章节题目的最后一页
        currentPage: Number, // 该章节题目的当前页
        subQuestionObj: Array, //子试题列表
        fatherId: Number,
        fatherIndex: Number,
        fatherLen: Number,
        swiperCurrent: Number, // 当前题目进度
        f_len: Number, // 父题的滑动总条数
        f_swiperCurrent: Number, // 父题当前滑动数
        // audio_text: Boolean //听力是否关闭
        title: String, //章节标题
        section_name: String, //章节名称
        subAnswerLog: Array //子试题历史答案
    },
    data() {
        return {
            //单选
            loading: null, //加载中1
            loading1: null, //加载中2
            star: null, //评星
            isStar: false, //是否已经评星
            isAnswer: false, // 是否显示答案解析/是否已答题
            input_value: "", // 用户输入的答案
            radio_value: "", // 用户选择的单选框ID
            radio_value1: "", //子试题用户选择的单选框ID
            input_value1: "", // 子试题用户输入的答案
            isAnswer1: false, // 子试题是否显示答案解析/是否已答题
            check_arr: [], // 用户选择的多选框ID
            check_value: [], // 用户选择的多选框value
            question_typeid: 0, // 题目类型(1选择题，2多选题，3判断题，4填空题，5问答题，6定值填空题)
            correct: "", // 正确答案的value**字符串**
            correct1: "", // 子试题正确答案的value**字符串**
            correctArr: [], // 正确答案的id**数组**(checkbox)
            correctArr1: [], // 子试题正确答案的id**数组**(checkbox)
            isDisabled: false, // 是否禁用表单组件
            isCorrect1: false,
            isDisabled1: false, // 子试题是否禁用表单组件
            isErrorReasonDisabled: false, //是否禁用错误原因选择
            isCorrect: false, // 用户的答案是否正确答案
            isbtnContinue: false, // 是否显示'继续练习'按钮
            is_close: false, // 该练习状态是否已关闭
            isShowVideo: false,
            isState: false, //下一题是否可点击
            videoUrl: "",
            videoTitle: "",
            text_answer_log: [], // 用户答案记录文本
            answer_id_log: [], // 用户答案记录ID
            subAnswer_id_log: [], //子试题用户答案记录ID
            subText_answer_log: [], // 子试题用户答案记录文本
            current: {
                src: "",
                name: ""
            },
            audioAction: {
                method: "pause"
            },
            isShowVoice: false,
            is_disable: true, // 改错题的【添加答案】状态，当为false表示可以隐藏
            is_paint: true, // 画图输入框的隐藏/显示, false表示隐藏
            is_err: false, // true表示打错，那么可以将这个状态来显示【下一题】按钮
            is_report: false, // true表示显示查看报告,false表示不显示
            // 以下两个属性只有当前这道题是定制填空题才会生效
            is_operation: true, // true表示用户点击了答对了，false表示用户点击了答错了，默认为true
            ShowOperation: false, // 控制答对/答错的显示/隐藏，当为false的时候，就隐藏，也就是说，只要用户点击了答对了/答错了，都要隐藏
            error_id: 0, // 错因ID
            // star_num: 0, // 答题后的评星个数
            my_train_time: 0, // 我的用时
            audioPlay: true, // 是否播放音频
            allowPlay: false, // 是否禁止播放音频
            setIndex: 0, //题目索引赋值
            //错误原因
            errorList: [],
            subQuestion: [], //子试题
            subAnswerIndexLog: [], //子试题历史答案
            errReason: "",
            spent: {
                h: 0, //定义时，分，秒，毫秒并初始化为0；
                m: 0,
                s: 0,
                ms: 0,
                time: 0, //定时器
                str: "00:00:00",
                times: "" //统计共多少秒时间
            },
            isShowCorrect: false,
            correctInput: "",
            correctTitle: "",
            q_obj: null,
            index1: null, //当前进度赋值
            isSubQuestion: false, // 是否子问题
            childswiperCurrent: 0 //子试题题目进度
        };
    },
    computed: {},
    watch: {
        index(newData) {
            if (newData) {
                this.start();
            }
        }
    },
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        // 时间开始
        this.start();
        this.getError();

        /**
         * 1为单选题
         * 2为多选题
         * 3为填空题
         * 4为不支持答题类型
         * 5为画图题
         * 6为连线题
         * */
        //是否为子试题

        if (this.question.is_one_choice == 2) {
            // 是否为单选题
            this.question_typeid = 1;
        } else if (this.question.is_many_choice == 2) {
            // 是否为多选题
            this.question_typeid = 2;
        } else if (
            this.question.is_many_input == 2 ||
            this.question.is_t_x == 2
        ) {
            // 是否为填空题
            this.question_typeid = 3;
            // 是否为听写题
            if (this.question.is_t_x == 2) {
                this.question.answer_list[0].stem_audio = this.question.stem_audio;
            }
        } else if (this.question.is_h_b == 2) {
            // 是否为不支持体型
            this.question_typeid = 4;
        } else if (this.question.is_l_x == 2) {
            this.question_typeid = 5;
        } else if (this.is_sub == 2 || this.is_sub_question == 2) {
            // 这里判断是否有子试题，如有则不作操作
            this.question_typeid = this.question.question_typeid;
        } else {
            // 这里处理系统没有的题型或提醒出错时本题不用作答即可
            this.question_typeid = 4;
        }
        if (this.subQuestionObj.length > 0) {
            this.subQuestion = this.subQuestionObj[0].data;
        }

        if (this.question.is_sub_question == 2) {
            if (this.subAnswerLog.length > 0) {
                let subAnswerLog = this.subAnswerLog[0].data.reverse();
                this.subQuestion.forEach(item => {
                    subAnswerLog.forEach(item1 => {
                        item.answerLog = item1;
                    });
                });
            }
            this.isSubQuestion = true;
            // 是否存在历史答案
            if (this.subQuestion[this.childswiperCurrent].answerLog) {
                this.isAnswer1 = true; //设置子试题是否答完
                this.subCorrectAnswer(); //设置子试题的正确答案
                this.isDisabled1 = true; //设置子试题不可答
                if (
                    this.subQuestion[this.childswiperCurrent].answerLog
                        .is_answer == 2
                ) {
                    this.isCorrect1 = true; //设置子试题是否回答正确
                } else {
                    this.isCorrect1 = false;
                }
                this.subAnswer_id_log = this.subQuestion[
                    this.childswiperCurrent
                ].answerLog.question_answer_id; //设置子试题单选框
                this.subText_answer_log = this.subQuestion[
                    this.childswiperCurrent
                ].answerLog.user_text_answer; //设置填空框
                if (
                    this.subQuestion[this.childswiperCurrent].answerLog
                        .question_answer_id[0] === "0"
                ) {
                    this.input_value1 = this.subQuestion[
                        this.childswiperCurrent
                    ].answerLog.user_text_answer.join(",");
                } else {
                    if (
                        this.subQuestion[this.childswiperCurrent]
                            .question_typeid == 1
                    ) {
                        this.radio_value1 = this.subQuestion[
                            this.childswiperCurrent
                        ].answerLog.question_answer_id[0]; //设置子试题用户选择答案
                        this.sub_radio1();
                    }
                }
            }
        }
        this.correctAnswer();
        if (this.isAnswerLog && !this.isSubQuestion) {
            this.showAnswerLog();
        }
    },
    destroyed() {
        // 生命周期钩子：实例销毁后调用",
        this.reset();
    },
    methods: {
        // 时间
        start() {
            //开始
            this.spent.time = setInterval(this.timer, 50);
        },
        stop() {
            //暂停
            clearInterval(this.spent.time);
        },
        reset() {
            //重置
            clearInterval(this.spent.time);
            this.spent.h = 0;
            this.spent.m = 0;
            this.spent.ms = 0;
            this.spent.s = 0;
            this.spent.str = "00:00:00";
        },
        timer() {
            //定义计时函数
            this.spent.ms = this.spent.ms + 50; //毫秒
            if (this.spent.ms >= 1000) {
                this.spent.ms = 0;
                this.spent.s = this.spent.s + 1; //秒
            }
            if (this.spent.s >= 60) {
                this.spent.s = 0;
                this.spent.m = this.spent.m + 1; //分钟
            }
            if (this.spent.m >= 60) {
                this.spent.m = 0;
                this.spent.h = this.spent.h + 1; //小时
            }
            this.spent.str =
                this.toDub(this.spent.h) +
                ":" +
                this.toDub(this.spent.m) +
                ":" +
                this.toDub(this.spent.s);
            //统计共看了多少秒
            this.spent.times =
                this.spent.s + this.spent.m * 60 + this.spent.h * 3600;
        },
        toDub(n) {
            //补0操作
            if (n < 10) {
                return "0" + n;
            } else {
                return "" + n;
            }
        },
        correctAnswer() {
            let answer_list = this.question.answer_list;
            let answer_arr = []; // 临时存放正确答案的value**数组**
            for (let i = 0; i < answer_list.length; i++) {
                if (answer_list[i].is_answer === 1) {
                    if (this.question_typeid === 1) {
                        // 单选题正确选项字母
                        answer_arr.push(String.fromCharCode(i + 65));
                    } else if (this.question_typeid === 2) {
                        // 多选题正确选项字母
                        answer_arr.push(String.fromCharCode(i + 65));
                    } else {
                        answer_arr.push(
                            this.filterHTMLTag(answer_list[i].answer)
                        );
                    }

                    // 将正确答案id存放在correctArr**数组**
                    this.correctArr.push(answer_list[i].question_answer_id);
                }
            }
            // 将正确答案value存放在correct**字符串**
            this.correct = answer_arr.join(",");
        },
        subCorrectAnswer() {
            let answer_list = this.subQuestion[this.childswiperCurrent]
                .answer_list;
            let answer_arr = []; // 临时存放正确答案的value**数组**
            for (let i = 0; i < answer_list.length; i++) {
                if (answer_list[i].is_answer === 1) {
                    if (
                        this.subQuestion[this.childswiperCurrent]
                            .question_typeid === 1
                    ) {
                        // 单选题正确选项字母
                        answer_arr.push(String.fromCharCode(i + 65));
                    } else if (
                        this.subQuestion[this.childswiperCurrent]
                            .question_typeid === 2
                    ) {
                        // 多选题正确选项字母
                        answer_arr.push(String.fromCharCode(i + 65));
                    } else {
                        answer_arr.push(
                            this.filterHTMLTag(answer_list[i].answer)
                        );
                    }

                    // 将正确答案id存放在correctArr**数组**
                    this.correctArr1.push(answer_list[i].question_answer_id);
                }
            }
            // 将正确答案value存放在correct**字符串**
            this.correct1 = answer_arr.join(",");
        },
        // 获取单选题的选中的ID
        getRadio(radio_value) {
            this.radio_value = radio_value;
        },
        // 子试题
        getRadio1(radio_value) {
            this.radio_value1 = radio_value;
        },
        getArea(radio_value) {
            this.input_value = radio_value;
        },
        // 子试题
        getArea1(radio_value) {
            this.input_value1 = radio_value;
        },
        // 点击答题 / 下一题 事件
        async sub_answer() {
            this.loading = this.$loading({
                lock: true,
                text: "获取答案解析中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            // 请求'练习作答'API的参数对象
            let answerData = {
                question_id: this.question.question_id, // 题目ID
                practice_id: this.practice_id // 记录ID
            };

            // 当前如果是子题，则做题时间应该也要确保做到最后一道题才把练习时间参数传递进去。
            if (this.isSubQuestion) {
                if (this.swiperCurrent + 1 === this.len) {
                    // Tip: 子题暂时不需要传递时间了
                    // answerData.train_time = uni.getStorageSync('time') // 从缓存中获取这道题的用时
                }
            } else {
                // 父题直接传递做题时间参数
                answerData.train_time = this.spent.times;
            }

            // 是否子问题，如果是，则增加子题所需参数
            if (this.isSubQuestion) {
                answerData.question_id = this.question.question_id;
                answerData.sub_question_id = this.subQuestion[
                    this.childswiperCurrent
                ].question_id;
                if (
                    this.subQuestion[this.childswiperCurrent]
                        .question_typeid === 1
                ) {
                    this.sub_radio1();
                    answerData.question_answer_id = this.radio_value1; // 单选题的用户答案ID
                }
                if (
                    this.subQuestion[this.childswiperCurrent]
                        .question_typeid === 3 ||
                    this.subQuestion[this.childswiperCurrent]
                        .question_typeid === 4
                ) {
                    var input_value1 = this.input_value1
                        .split(",")
                        .join("[!=!]");
                    answerData.answer = Base64.encode(input_value1);
                }
            }

            // 单项选择题/判断题的答案处理
            if (this.question_typeid === 1) {
                this.sub_radio();
                answerData.question_answer_id = this.radio_value; // 单选题的用户答案ID
            }
            // 多项选择题的答案处理
            else if (this.question_typeid === 2) {
                this.sub_checkbox();
                answerData.question_answer_id = this.check_arr.join(","); // 多选题的用户答案ID
            }
            // 判断题的答案处理
            else if (this.question_typeid === 666) {
                this.sub_judge();
                answerData.question_answer_id = this.radio_value; // 判断题的用户答案ID
            }
            // 填空题暂不支持答题
            else if (this.question_typeid === 4 && !this.isSubQuestion) {
                answerData.answer = this.input_value = "暂不支持答题";
            }
            // 问答题/定值填空题/改错题/的答案处理
            else if (this.question_typeid === 5 || this.question_typeid === 3) {
                var input_value = this.input_value.split(",").join("[!=!]");
                answerData.answer = Base64.encode(input_value);
            }
            // 画图题的答案处理
            else if (this.question_typeid === 6) {
                // 图片已经经过base64编码了，所以无需在进行编码
                // answerData.answer = this.input_value
                answerData.answer = this.input_value = "暂不支持答题";
            }
            // 不是子试题
            if (!this.input_value && !this.isSubQuestion) {
                this.$message.error("你还没有作答哦！");
                this.loading.close();
                return false;
            }
            // 子试题
            if (!this.input_value1 && this.isSubQuestion) {
                this.$message.error("你还没有作答哦！");
                this.loading.close();
                return false;
            }
            // 答题后禁用按钮
            this.isDisabled = true;

            // 练习作答
            // 文档：https://www.showdoc.cc/416494108281686?page_id=2514510977449560
            console.log("回答参数", answerData);
            await practiceAnswer(answerData).then(res => {
                console.log("回答>>>>>>>>", res);
                if (res.code === 200) {
                    let status = res.data;
                    // status.is_medal = 1; // 模拟获得奖章
                    // 1为回答错误 2为回答正确，
                    if (status.is_answer === 2) {
                        if (!this.isSubQuestion) {
                            this.isCorrect = true;
                        }
                    } else {
                        // 答错了，显示【下一题】按钮,并且告诉父组件此时不能滑动，需要填写错因才可以滑动
                        // PS: 排除子题，所有子题暂时不需要
                        if (!this.isSubQuestion) {
                            this.is_err = true;
                        }
                    }

                    // 已经答题了，可以告诉父组件把当前这道题的计时清空并且隐藏了
                    // 如果当前有子题，则要在子题最后面才隐藏计时
                    if (this.isSubQuestion) {
                        if (this.swiperCurrent + 1 === this.len) {
                            // this.$emit("setAnswer", {
                            //     isAnswer: this.isAnswer,
                            //     isSubQuestion: this.isSubQuestion
                            // });
                            // 综合题简单给个用时提示
                            // let time = uni.getStorageSync("time");
                            // let title = "一共用时：" + time + "S";
                            // uni.showToast({
                            //     title: title,
                            //     icon: "none",
                            //     duration: 2000
                            // });
                        }
                    } else {
                        // 父题直接答题后隐藏计时
                        // this.$emit("setAnswer", {
                        //     isAnswer: this.isAnswer,
                        //     isSubQuestion: this.isSubQuestion
                        // });
                        //时间重置
                        this.reset();
                    }

                    // 1为获得勋章
                    if (status.is_close === 1) {
                        this.is_close = true;
                        this.$emit("getPrize", "credit"); // 获得学情分
                    }

                    // this.$emit("slither", this.index);

                    // 将改错题按钮隐藏
                    this.is_disable = false;

                    // 将画图隐藏
                    this.is_paint = false;

                    // 显示今日学情弹窗判断 / 以及查看报告按钮
                    // 需要判断有子题的话也要确保子题滑动数和子题滑动总数一致，并且父题滑动数和父题滑动数一致
                    // 如果没有子题，那么以下的条件也可以成立。因为没有子题，此时this.f_len===this.len / f_swiperCurrent===swiperCurrent 也都是相等的
                    if (
                        this.f_swiperCurrent + 1 === this.f_len &&
                        this.swiperCurrent + 1 === this.len
                    ) {
                        this.$emit("getPropUp"); //今日学情弹窗
                        // 显示查看报告按钮
                        this.is_report = true;
                        console.log("已经是最后一题了");
                    }
                } else {
                    // uni.showToast({
                    //     title: res.data.msg,
                    //     icon: "none"
                    // });
                }
                // 是否答完题
                if (this.isSubQuestion) {
                    this.isAnswer1 = true;
                    this.isDisabled1 = true;
                    this.setAnswerLog1();
                    this.subCorrectAnswer();
                } else {
                    this.isAnswer = true;
                }

                this.loading.close();
            });

            // PS：只有父题才可以获取练习时间
            if (!this.isSubQuestion) {
                // [练习时间] 所需参数
                let q_obj = {
                    question_id: this.question.question_id, // 试题ID
                    practice_id: this.practice_id // 记录ID
                };
                // 答题后要获取当前他的答题时间[练习时间（单题）]
                await practiceTrainTime(q_obj).then(res => {
                    if (
                        res.data.train_time &&
                        Number(res.data.train_time) > 0
                    ) {
                        this.my_train_time = res.data.train_time;
                    } else {
                        this.my_train_time = this.spent.times;
                    }
                    // 设置答案
                    this.setAnswerLog(this.my_train_time);
                });
            } else {
                //   子试题设置答案
                // 设置答案
            }
        },

        sub_radio() {
            // 单项选择题
            let answer_list = this.question.answer_list;
            for (let i = 0; i < answer_list.length; i++) {
                if (answer_list[i].question_answer_id == this.radio_value) {
                    // this.input_value = this.filterHTMLTag(answer_list[i].answer)
                    this.input_value = String.fromCharCode(i + 65);
                    return true;
                }
            }
        },
        sub_radio1() {
            // 子试题单项选择题
            let answer_list = this.subQuestion[this.childswiperCurrent]
                .answer_list;
            for (let i = 0; i < answer_list.length; i++) {
                if (answer_list[i].question_answer_id == this.radio_value1) {
                    // this.input_value = this.filterHTMLTag(answer_list[i].answer)
                    this.input_value1 = String.fromCharCode(i + 65);
                    return true;
                }
            }
        },
        sub_checkbox() {
            // 多项选择题的答案处理
            let answer_list = this.question.answer_list;
            answer_list.map((cur, index) => {
                let isIndex = this.check_arr.indexOf(
                    String(cur.question_answer_id)
                );
                if (isIndex !== -1) {
                    // this.check_value.push(this.filterHTMLTag(cur.answer))
                    this.check_value.push(String.fromCharCode(index + 65));
                    return true;
                }
            });
            this.input_value = this.check_value.join(",");
        },

        sub_judge() {
            // 判断题的答案处理
            let answer_list = this.question.answer_list;
            for (let i = 0; i < answer_list.length; i++) {
                if (answer_list[i].question_answer_id == this.radio_value) {
                    this.input_value = this.filterHTMLTag(
                        answer_list[i].answer
                    );
                    return true;
                }
            }
        },
        filterHTMLTag(hMsg) {
            let msg = hMsg.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
            msg = msg.replace(/<(?!img).*?>/g, ""); // 去除HTML保留 <img> Tag 去除所有标签：/<\/?[^>]*>/g  {jason 修改2019-08-08 15.23}
            msg = msg.replace(/[|]*\n/, ""); // 去除行尾空格
            msg = msg.replace(/&nbsp;/gi, ""); // 去掉nbsp
            return msg;
        },

        getError() {
            getErrorList({}).then(res => {
                res.data.map(item => {
                    item.errorList.forEach(item2 => {
                        item2.isState = false;
                    });
                });
                // 开始赋值
                this.errorList = res.data;
            });
        },

        // 错误原因选择
        errChange(e) {
            this.error_id = e.error_id;
            this.$emit("getErrTopic", {
                error_id: e.error_id
            });
        },
        // 下一题
        next() {
            if (this.isSubQuestion) {
                this.childswiperCurrent++;
                this.isAnswer1 = false;
                this.isDisabled1 = false;
                this.isCorrect1 = false;

                if (this.childswiperCurrent == this.subQuestion.length) {
                    this.index1 = this.swiperCurrent;
                    this.index1++;
                    this.$emit("setIndex", this.index1);
                } else {
                    if (this.subQuestion[this.childswiperCurrent].answerLog) {
                        console.log(
                            "子试题历史答案",
                            this.subQuestion[this.childswiperCurrent].answerLog
                        );
                        this.isAnswer1 = true; //设置子试题是否答完
                        this.subCorrectAnswer(); //设置子试题的正确答案
                        this.isDisabled1 = true; //设置子试题不可答
                        if (
                            this.subQuestion[this.childswiperCurrent].answerLog
                                .is_answer == 2
                        ) {
                            this.isCorrect1 = true; //设置子试题是否回答正确
                        } else {
                            this.isCorrect1 = false;
                        }
                        this.subAnswer_id_log = this.subQuestion[
                            this.childswiperCurrent
                        ].answerLog.question_answer_id; //设置子试题单选框
                        this.subText_answer_log = this.subQuestion[
                            this.childswiperCurrent
                        ].answerLog.user_text_answer; //设置填空框
                        if (
                            this.subQuestion[this.childswiperCurrent].answerLog
                                .question_answer_id[0] === "0"
                        ) {
                            this.input_value1 = this.subQuestion[
                                this.childswiperCurrent
                            ].answerLog.user_text_answer.join(",");
                        } else {
                            if (
                                this.subQuestion[this.childswiperCurrent]
                                    .question_typeid == 1
                            ) {
                                this.radio_value1 = this.subQuestion[
                                    this.childswiperCurrent
                                ].answerLog.question_answer_id[0]; //设置子试题用户选择答案
                                this.sub_radio1();
                            }
                        }
                    }
                }
            } else {
                this.index1 = this.swiperCurrent;
                this.index1++;
                console.log("this.is_err", this.is_err);
                console.log(
                    "this.question.isShowError",
                    this.question.isShowError
                );
                if (
                    this.is_err &&
                    this.question.isShowError &&
                    this.question_typeid !== 4
                ) {
                    console.log("this.errReason", this.errReason);
                    if (this.errReason) {
                        if (!this.question.answerLog.error_id) {
                            this.setErrorReason();
                        }
                        this.$emit("setIndex", this.index1);
                    } else {
                        this.$message.error("请选择错误原因！");
                    }
                } else {
                    this.$emit("setIndex", this.index1);
                }
            }
        },
        // 上一题
        last() {
            if (this.isSubQuestion) {
                if (this.childswiperCurrent == this.subQuestion.length) {
                    this.index1 = this.swiperCurrent;
                    this.index1++;
                    this.$emit("setIndex", this.index1);
                }
                if (this.childswiperCurrent == 0) {
                    this.index1 = this.swiperCurrent;
                    this.index1--;
                    this.$emit("setIndex", this.index1);
                } else {
                    this.childswiperCurrent--;
                    if (this.subQuestion[this.childswiperCurrent].answerLog) {
                        console.log(
                            "子试题历史答案",
                            this.subQuestion[this.childswiperCurrent].answerLog
                        );
                        this.isAnswer1 = true; //设置子试题是否答完
                        this.subCorrectAnswer(); //设置子试题的正确答案
                        this.isDisabled1 = true; //设置子试题不可答
                        if (
                            this.subQuestion[this.childswiperCurrent].answerLog
                                .is_answer == 2
                        ) {
                            this.isCorrect1 = true; //设置子试题是否回答正确
                        } else {
                            this.isCorrect1 = false;
                        }
                        this.subAnswer_id_log = this.subQuestion[
                            this.childswiperCurrent
                        ].answerLog.question_answer_id; //设置子试题单选框
                        this.subText_answer_log = this.subQuestion[
                            this.childswiperCurrent
                        ].answerLog.user_text_answer; //设置填空框
                        if (
                            this.subQuestion[this.childswiperCurrent].answerLog
                                .question_answer_id[0] === "0"
                        ) {
                            this.input_value1 = this.subQuestion[
                                this.childswiperCurrent
                            ].answerLog.user_text_answer.join(",");
                        } else {
                            if (
                                this.subQuestion[this.childswiperCurrent]
                                    .question_typeid == 1
                            ) {
                                this.radio_value1 = this.subQuestion[
                                    this.childswiperCurrent
                                ].answerLog.question_answer_id[0]; //设置子试题用户选择答案
                                this.sub_radio1();
                            }
                        }
                    }
                }
            } else {
                this.index1 = this.swiperCurrent;
                this.index1--;
                if (
                    this.is_err &&
                    this.question.isShowError &&
                    this.question_typeid !== 4
                ) {
                    if (this.errReason) {
                        if (!this.question.answerLog.error_id) {
                            this.setErrorReason();
                        }
                        this.$emit("setIndex", this.index1);
                    } else {
                        this.$message.error("请选择错误原因！");
                    }
                } else {
                    this.$emit("setIndex", this.index1);
                }
            }
        },
        // 调用历史答案方法
        showAnswerLog() {
            this.loading1 = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            if (this.question.is_sub_question === 2) return false;
            let answerLog = this.question.answerLog;
            this.text_answer_log = answerLog.user_text_answer;
            this.answer_id_log = answerLog.question_answer_id;
            this.my_train_time = answerLog.mySpent;
            this.isAnswer = true;
            this.isDisabled = true;
            this.isCorrect = answerLog.is_answer === 2 ? true : false;
            this.is_err = answerLog.is_answer === 2 ? false : true;
            this.errReason = answerLog.error_id;
            this.star = answerLog.star;
            this.isStar = answerLog.star ? true : false;
            this.isErrorReasonDisabled = answerLog.error_id ? true : false;
            if (answerLog.question_answer_id[0] === "0") {
                this.input_value = answerLog.user_text_answer.join(",");
            } else {
                switch (this.question_typeid) {
                    case 1:
                        this.radio_value = answerLog.question_answer_id[0];
                        this.sub_radio();
                        break;
                    case 2:
                        this.check_arr = answerLog.question_answer_id;
                        this.sub_checkbox();
                        break;
                    case 3:
                        this.radio_value = answerLog.question_answer_id[0];
                        this.sub_judge();
                        break;
                }
            }
            this.loading1.close();
        },
        // 答一题存一题答案
        setAnswerLog(mySpent) {
            practiceAnswerLog({
                practice_id: this.practice_id
            }).then(res => {
                if (res.code === 200) {
                    this.$emit(
                        "setAnswerLog",
                        res.data[this.swiperCurrent],
                        mySpent
                    );
                }
            });
        },
        // 子试题设置答案
        setAnswerLog1() {
            practiceAnswerLog({
                practice_id: this.practice_id
            }).then(res => {
                console.log();
                if (res.code === 200) {
                    this.subQuestion[this.childswiperCurrent].answerLog =
                        res.data[this.swiperCurrent].sub_question[
                            this.childswiperCurrent
                        ];
                    if (
                        this.subQuestion[this.childswiperCurrent].answerLog
                            .is_answer == 2
                    ) {
                        this.isCorrect1 = true;
                    } else {
                        this.isCorrect1 = false;
                    }
                    console.log(
                        "子试题设置答案",
                        this.subQuestion[this.childswiperCurrent].answerLog
                    );
                    this.$emit(
                        "setSubAnswerLog",
                        this.subQuestionObj[0].name,
                        this.childswiperCurrent,
                        this.subQuestion[this.childswiperCurrent].answerLog
                    );
                }
            });
        },
        // 设置错误原因
        setErrorReason() {
            addPracticeTrainError({
                question_id: this.question.question_id, // 题目ID
                practice_id: this.practice_id, // 记录ID
                error_id: Number(this.errReason)
            }).then(res => {
                if (res.code === 200) {
                    console.log("添加错误原因成功");
                }
            });
            this.$emit("setErrorReason", Number(this.errReason), true);
        },
        //评分
        starChange(e) {
            addPracticeTrainStar({
                question_id: this.question.question_id, // 试题ID
                practice_id: this.practice_id, // 记录ID
                star_num: Number(e)
            }).then(res => {
                if (res.code == 200) {
                    this.isStar = true;
                    this.$message({
                        message: "评星成功",
                        customClass: "customClass",
                        type: "success"
                    });
                }
            });
            this.$emit("setStar", e);
        },
        //前往智趣报告
        toIntellectualReport() {
            if (
                this.is_err &&
                this.question.isShowError &&
                this.question_typeid !== 4
            ) {
                if (this.errReason) {
                    if (!this.question.answerLog.error_id) {
                        this.setErrorReason();
                    }
                    this.$router.push({
                        path: "/synchronization/intellectualReport/index",
                        query: {
                            section_name: this.section_name,
                            title: this.title,
                            practice_id: this.practice_id // 记录ID
                        }
                    });
                } else {
                    this.$message.error("请选择错误原因！");
                }
            } else {
                this.$router.push({
                    path: "/synchronization/intellectualReport/index",
                    query: {
                        section_name: this.section_name,
                        title: this.title,
                        practice_id: this.practice_id // 记录ID
                    }
                });
            }
        },
        // 开启纠错弹窗
        correctError(type, question_id) {
            if (type == 1) {
                this.correctTitle = "题目有误，我要纠错";
                this.q_obj = {
                    question_id: question_id,
                    feedback_type: 1
                };
            } else {
                this.correctTitle = "解析有误，我要纠错";
                this.q_obj = {
                    question_id: question_id,
                    feedback_type: 2
                };
            }
            this.isShowCorrect = true;
        },
        // 纠错提交
        correctSubmit() {
            if (this.correctInput != "") {
                this.q_obj.feedback_text = this.correctInput;
                console.log("参数", this.q_obj);
                feedbackAdd(this.q_obj).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: res.msg,
                            customClass: "customClass",
                            type: "success"
                        });
                        this.isShowCorrect = false;
                        this.correctInput = "";
                        return;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            } else {
                this.$message.error("内容不能为空");
            }
        }
    }
};
</script>

<style lang="scss" scoped>
@import "./common.scss";
.answer {
    margin-bottom: 20px;
}
.titleError {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #cccccc;
    margin-left: 15px;
    .correct {
        color: #00d5a2;
        cursor: pointer;
    }
    .el-rate {
        margin-left: 15px;
    }
}
.titleError1 {
    display: flex;
    align-items: center;
    width: 48%;
    .progress {
        margin-left: 20px;
        color: #cccccc;
    }
}
</style>
